<template>
  <div class="app-container">
    <div>
      <img src="@/assets//logo.png" class="user-avatar" />
    </div>
    <div>
      <span>用户账号：</span>
      <div class="wrap">{{ sysUser.username }}</div>
    </div>
    <div>
      <span>用户名：</span>
      <div class="wrap">{{ sysUser.nickname }}</div>
    </div>
    <div>
      <span>激活状态：</span>
      <div class="wrap">
        <el-tag v-show="sysUser.user_level === 1" type="success">已激活</el-tag>
        <el-tag v-show="sysUser.user_level === 0" type="warning">未激活</el-tag>
      </div>
    </div>
    <div>
      <span>最多登录设备数：</span>
      <div class="wrap">
        {{ sysUser.max_devices }}
      </div>
    </div>
    <template v-if="sysUser.user_level === 1">
      <div>
        <span>会员到期时间：</span>
        <div class="wrap">
          {{ outTime }}
        </div>
      </div>
      <div>
        <span>绑定店铺数：</span>
        <div class="wrap">
          {{ sysUser.boundled_mallShops.length }} / {{ sysUser.max_mallShops }}
        </div>
      </div>
      <div>
        <span>已绑店铺：</span>
        <div class="wrap">
          <div class="mall-list">
            <el-tag v-for="mall in bindMalls" :key="mall.mall_id">
              {{ mall.mall_name }}
            </el-tag>
            <p v-if="!hasPddUser" style="color: red">
              正在读取拼多多信息，请稍后...
            </p>
            <template v-else>
              <el-button
                v-show="
                  sysUser.boundled_mallShops.length < sysUser.max_mallShops
                "
                type="primary"
                @click="handleBind"
              >
                绑定店铺
              </el-button>
            </template>
          </div>
        </div>
      </div>
    </template>
    <Bind :visible="bindVisible" @bind="bindNew" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
import { Bind } from '@/layout/components/index'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const sysUser = computed(() => userStore.sysUser)
const pddUser = computed(() => userStore.userInfo)
const hasPddUser = computed(() => userStore.hasPddUser)
const outTime = computed(() => {
  const date = new Date(sysUser.value.out_time)
  const y = date.getFullYear()
  const M = date.getMonth() + 1
  const d = date.getDate()
  const hh = date.getHours()
  const mm = date.getMinutes()
  const ss = date.getSeconds()
  return `${y}/${M}/${d} ${hh}:${mm}:${ss}`
})
const bindVisible = ref(false)

const handleBind = () => {
  bindVisible.value = true
}
const bindMalls = computed(() => {
  return sysUser.value.boundled_mallShops
})
const bindNew = async () => {
  ElMessage.success('绑定成功！')
  bindVisible.value = false
  await userStore.getInfo()
}
</script>

<style lang="scss" scoped>
.app-container {
  margin: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    .user-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    > span {
      width: 40%;
      text-align: right;
      font-weight: bold;
    }
    > .wrap {
      width: 40%;
    }
    .mall-list {
      .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
